<template>
  <div>
    <a-modal
      :title="isEditor == true ? '编辑物料' : '新增物料'"
      :visible="visible"
      okText="确定"
      cancelText="取消"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <!-- 物料名称 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">物料名称</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiData.productName"
              placeholder="物料名称"
              allow-clear
            />
          </a-col>
        </a-row>

        <!-- 物料价格 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">物料价格</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiData.productPrice"
              type="numer"
              placeholder="请输入新增物料价格"
              allow-clear
            />
          </a-col>
        </a-row>
        <!-- 物料图片 -->
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="4">物料图片</a-col>
          <a-col :span="20">
            <upload
              :maxNum="1"
              @imags="getImages"
              :hasAvatar="apiData.productImage"
            />
          </a-col>
        </a-row>
        <!-- 单位物料所占大小 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">单位物料所占大小</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiData.productSize"
              placeholder="请输入单位物料所占大小(单位 m2)"
              allow-clear
            />
          </a-col>
        </a-row>
        <!-- 物料来源 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">物料来源</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiData.productSource"
              placeholder="请输入物料来源"
              allow-clear
            />
          </a-col>
        </a-row>
        <!-- 物料简介 -->
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="4">物料简介</a-col>
          <a-col :span="20">
            <a-textarea
              placeholder="请输入物料简介"
              :rows="4"
              allow-clear
              v-model:value="apiData.productDesc"
            />
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>


<script>
import Upload from '@/views/common/upload'
import { originalProduct, modifiyoriginalProduct } from '@/api/materials'
export default {
  components: {
    Upload,
  },
  data() {
    return {
      visible: false,
      isEditor: false,
      confirmLoading: false,
      //   api接口
      apiData: {
        productName: '', //原材材料名称
        productDesc: '', //物料简介
        productImage: '', //物料图片
        productPrice: null, //物料价格(单位分)
        productSize: '', //单位物料所占大小(单位 m2)
        productSource: '', //	物料来源
      },
    }
  },
  methods: {
    /**
     * 图片上传
     */
    getImages(imgs) {
      if (imgs.length > 0) {
        //   物料只传一张图片  只需要获取第一个
        this.apiData.productImage = imgs.filter(
          (img) => img.status == 'done'
        )[0].response.picUrl
      } else {
        this.apiData.productImage = ''
      }
    },
    handleCancel(e) {
      this.visible = false
      this.isEditor = false
      this.clearFrom()
    },
    /**
     * 添加或者编辑
     */
    handleOk() {
      this.isEditor ? this.editorForm() : this.addFrom()
    },
    /**
     * 编辑物料表单信息
     */
    editorForm() {
      if (this.rules()) {
        modifiyoriginalProduct(this.apiData).then((res) => {
          this.$message.success('修改成功')
          this.$parent.ManagerList()
          this.clearFrom()
        })
      }
    },
    /**
     *添加物料表单信息
     */
    addFrom() {
      if (this.rules()) {
        originalProduct(this.apiData).then((res) => {
          this.$message.success('添加成功')
          this.$parent.ManagerList()
          this.clearFrom()
        })
      }
    },
    //清除表单数据
    clearFrom() {
      this.confirmLoading = false
      this.visible = false
      this.apiData = Object.assign({
        productName: '', //原材材料名称
        productDesc: '', //物料简介
        productImage: '', //物料图片
        productPrice: null, //物料价格(单位分)
        productSize: '', //单位物料所占大小(单位 m2)
        productSource: '', //	物料来源
      })
    },
    //规则校验
    rules() {
      if (
        this.apiData.productName === '' ||
        this.apiData.productName === null
      ) {
        this.$message.error('请填写物料名称')
        return false
      }

      if (
        this.apiData.productPrice === '' ||
        this.apiData.productPrice === null
      ) {
        this.$message.error('请填写物料价格')
        return false
      }
      if (
        this.apiData.productImage === '' ||
        this.apiData.productImage === null
      ) {
        this.$message.error('请填写物料图片')
        return false
      }
      if (
        this.apiData.productSize === '' ||
        this.apiData.productSize === null
      ) {
        this.$message.error('请填写物料所占大小')
        return false
      }
      if (
        this.apiData.productSource === '' ||
        this.apiData.productSource === null
      ) {
        this.$message.error('请填写物料来源')
        return false
      }
      if (
        this.apiData.productDesc === '' ||
        this.apiData.productDesc === null
      ) {
        this.$message.error('请填写物料简介')
        return false
      }
      return true
    },
  },
}
</script>

<style>
</style>